<template>
    <div class="home animated bounceInLeft">
        <el-skeleton v-if="screen.loading" :rows="15" animated/>
        <template v-else>
            <h2>大屏系列概览</h2>
            <el-scrollbar>
                <p class="screen" v-for="(item,index) in screen.list" :key="item.id" @click="enterScreen(item)">
                    {{index+1}}、{{item.name}}</p>
            </el-scrollbar>
        </template>
    </div>
</template>

<script>
    import {reactive} from "vue"
    import {useRouter} from "vue-router"
    import ScreenCommonService from "@/services/ScreenCommon.service"

    export default {
        name: 'Home',
        setup() {
            const router = useRouter()
            let screen = reactive({
                loading: false,
                list: []
            })

            // 查询所有大屏列表
            const queryAllScreen = () => {
                screen.loading = true
                ScreenCommonService.queryAllScreen().then((res) => {
                    let {status, data} = res
                    if (status === 200) {
                        screen.list = data
                    }
                }).finally(() => {
                    screen.loading = false
                })
            }

            queryAllScreen()

            // 进入大屏
            const enterScreen = (screen) => {
                let newRoute = router.resolve({name: screen.path, query: {name: screen.name}})
                window.open(newRoute.href, "_blank")
            }


            return {
                screen,
                enterScreen
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@/common/css/common.style.styl"
    .home
        width: 100%
        height 100%
        padding-left 5%
        overflow auto
        font-size 24px
        h2
            margin 15px 0
        :deep(.el-skeleton)
            width: 95%;
            margin-top: 60px;
        :deep(.el-scrollbar)
            height 90vh
            .screen
                cursor pointer
                &:not(:last-of-type)
                    margin-bottom 20px
                &:hover
                    color #409eff
                    text-decoration underline
</style>